<template>
	<view class="tarot-container" @touchstart="handlePageTouchStart">
		<!-- 星空背景 -->
		<canvas canvas-id="starCanvas" class="star-canvas"></canvas>
		
		<!-- 标题区域 -->
		<view class="header">
			<text class="title">塔罗占卜</text>
			<text class="subtitle">扇形展开 · 78张完整牌组</text>
		</view>
		
		<!-- 卡牌区域 -->
		<view class="cards-area">
			<!-- 洗牌状态 - 3D旋转 -->
			<view v-if="!expanded" class="card-shuffle-area">
				<view 
					v-for="(card, index) in shuffleDisplayCards" 
					:key="'shuffle-' + index"
					class="card card-back shuffle-card"
					:class="{'shuffling': shuffling}"
					:style="{
						transform: shuffling ? 
							`rotateY(${card.rotateY}deg) rotateX(${card.rotateX}deg) translateZ(${card.translateZ}px)` : 
							`translateX(${index * 0.5}px) translateY(${index * 0.3}px) rotate(${index * 0.5}deg)`,
						zIndex: index,
						animationDelay: `${index * 0.02}s`
					}">
					<view class="card-inner">
						<view class="card-back-design">
							<view class="mystical-symbol">✦</view>
							<view class="card-border"></view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 展开状态 - 扇形堆叠 -->
			<view v-else class="card-fan-container" :class="{'dragging': isDragging}" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
				<view class="card-fan">
					<view 
						v-for="(card, index) in displayCards" 
						:key="'card-' + card.id"
						class="card card-flip-container"
						:class="{
							'flipped': card.flipped,
							'selected': card.selected,
							'card-hidden': card.selected
						}"
						:style="{
							transform: getFanTransform(index),
							zIndex: card.selected ? 1000 : (card.flipped ? 500 : getCardZIndex(index)),
							animationDelay: `${index * 0.008}s`
						}"
						@click="selectCard(index)">
						<!-- 背面 -->
						<view class="card-face card-back">
							<view class="card-inner">
								<view class="card-back-design">
									<view class="mystical-symbol">✦</view>
									<view class="card-border"></view>
									<text class="tarot-text">TAROT</text>
								</view>
							</view>
						</view>
						<!-- 正面 -->
						<view class="card-face card-front">
							<image class="card-image" :src="card.image_url" mode="aspectFill" :style="{transform: card.is_up === 2 ? 'rotate(180deg)' : 'rotate(0deg)'}"></image>
							<view class="card-glow" v-if="card.selected"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 卡牌放置槽位 -->
		<view v-if="expanded" class="card-slots">
			<view 
				v-for="(slot, index) in 3" 
				:key="'slot-' + index"
				class="card-slot"
				:class="{'has-card': selectedCards[index]}">
				<text class="slot-label">{{ ['过去', '现在', '未来'][index] }}</text>
				<!-- 已选中的卡牌 -->
				<view v-if="selectedCards[index]" class="slot-card" @click="previewSlotCard(index)">
					<view class="card card-front">
						<image class="card-image" :src="selectedCards[index].image_url" mode="aspectFill" :style="{transform: selectedCards[index].is_up === 2 ? 'rotate(180deg)' : 'rotate(0deg)'}"></image>
					</view>
				</view>
				<!-- 空槽位占位 -->
				<view v-else class="slot-placeholder">
					<text class="placeholder-text">{{ index + 1 }}</text>
				</view>
			</view>
		</view>
		
		<!-- 操作按钮 -->
		<view class="action-area">
			<button 
				v-if="!shuffling && !expanded" 
				class="action-btn shuffle-btn" 
				@click="startShuffle"
				hover-class="btn-hover">
				<view class="btn-content">
					<text class="btn-icon">🔮</text>
					<text class="btn-text">开始洗牌</text>
				</view>
			</button>
			
			<view v-if="shuffling" class="shuffling-indicator">
				<view class="loading-spinner"></view>
				<text class="shuffling-text">正在洗牌...</text>
			</view>
			
			<!-- 开始测试按钮 -->
			<button 
				v-if="expanded && selectedCards.length === 3 && !showResult" 
				class="action-btn start-btn" 
				@click="goToChat"
				hover-class="btn-hover">
				<view class="btn-content">
					<text class="btn-icon">✨</text>
					<text class="btn-text">开始测试</text>
				</view>
			</button>

			<button 
				v-if="expanded && selectedCards.length === 3" 
				class="action-btn reset-btn" 
				@click="reset"
				hover-class="btn-hover">
				<view class="btn-content">
					<text class="btn-icon">🔄</text>
					<text class="btn-text">重新抽取</text>
				</view>
			</button>
		</view>
		
		<!-- 选择进度 -->
		<view v-if="expanded && selectedCards.length < 3" class="progress-area">
			<text class="progress-text">已选择 {{ selectedCards.length }} / 3 张</text>
			<view class="progress-dots">
				<view 
					v-for="i in 3" 
					:key="i" 
					class="dot"
					:class="{'active': i <= selectedCards.length}"></view>
			</view>
		</view>

		<!-- 开始测试按钮 (已移动到action-area) -->
		<!-- <view v-if="expanded && selectedCards.length === 3 && !showResult" class="start-test-area">
			<button 
				class="action-btn start-btn" 
				@click="showResult = true"
				hover-class="btn-hover">
				<view class="btn-content">
					<text class="btn-icon">✨</text>
					<text class="btn-text">开始测试</text>
				</view>
			</button>
		</view> -->
		
		<!-- 卡牌预览遮罩层 -->
		<view v-if="showPreview" class="preview-overlay" @click="reselect">
			<view class="preview-card-container" @click.stop="tempSelectedIndex !== -1 ? confirmSelection() : reselect()">
				<view class="preview-title-area">
					<text class="preview-title">{{ tempSelectedIndex !== -1 ? '您选择的牌' : '卡牌详情' }}</text>
					<text class="preview-subtitle" v-if="tempSelectedIndex !== -1">点击卡牌翻开</text>
				</view>
				
				<!-- 选择模式：显示背面 -->
				<view v-if="tempSelectedIndex !== -1" class="card card-back preview-card">
					<view class="card-inner">
						<view class="card-back-design">
							<view class="mystical-symbol">✦</view>
							<view class="card-border"></view>
							<text class="tarot-text">TAROT</text>
						</view>
					</view>
				</view>
				
				<!-- 查看模式：显示正面 -->
				<view v-else class="card card-front preview-card">
					<image class="card-image" :src="previewCard.image_url" mode="aspectFill" :style="{transform: previewCard.is_up === 2 ? 'rotate(180deg)' : 'rotate(0deg)'}"></image>
				</view>
			</view>
		</view>
		
		<!-- 结果弹窗 -->
		<view v-if="showResult" class="result-overlay" @click="closeResult">
			<view class="result-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">✨ 占卜结果 ✨</text>
					<text class="modal-subtitle">命运的启示</text>
				</view>
				
				<view class="result-cards">
					<view 
						v-for="(card, index) in selectedCardData" 
						:key="index" 
						class="result-item"
						:style="{animationDelay: `${index * 0.2}s`}">
						<view class="result-header">
							<text class="position-badge">{{ ['过去', '现在', '未来'][index] }}</text>
						</view>
						<view class="result-card-info" v-if="card.detail">
							<text class="result-card-name">{{ card.detail.name_cn }} {{ card.is_up === 1 ? '(正位)' : '(逆位)' }}</text>
						</view>
						<view class="result-card-image">
							<image :src="card.image_url" mode="aspectFit" :style="{transform: card.is_up === 2 ? 'rotate(180deg)' : 'rotate(0deg)'}"></image>
						</view>
						<view class="result-card-meaning" v-if="card.detail">
							<text>{{ card.detail.meaning_cn }}</text>
						</view>
					</view>
				</view>
				
				<button class="close-btn" @click="closeResult">
					<text>我知道了</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import { tarotCards } from './tarot-data.js';
import { buildApiUrl, TAROT_API } from '@/config/api.js';

export default {
		data() {
		return {
			shuffling: false,
			expanded: false,
			showResult: false,
			showPreview: false, // 显示卡牌预览遮罩层
			previewCard: null, // 当前预览的卡牌
			tempSelectedIndex: -1, // 临时选中的卡牌索引
			tempIsUp: 1, // 临时选中的正逆位
			selectedCards: [],
			selectedCardIndices: [], // 已选中的卡牌索引
			displayCards: [],
			tarotCards: tarotCards, // 78张完整塔罗牌数据
			fanOffset: 0, // 扇形偏移量,用于滑动控制
			touchStartX: 0,
			touchStartOffset: 0,
			isAnimating: false, // 标记是否正在执行回弹动画
			isDragging: false // 标记是否正在拖动卡牌
		}
		},
	computed: {
		selectedCardData() {
			return this.selectedCards;
		},
		// 洗牌时显示的卡牌（只显示部分用于动画）
		shuffleDisplayCards() {
			return this.displayCards.slice(0, 20);
		}
	},
	onLoad() {
		this.initCards();
		this.drawStars();
		
		// 微信小程序中强制禁用左滑返回
		// #ifdef MP-WEIXIN
		if (typeof wx !== 'undefined' && wx.setEnableDebug) {
			// 尝试设置页面属性
			const pages = getCurrentPages();
			if (pages.length > 0) {
				const currentPage = pages[pages.length - 1];
				if (currentPage && currentPage.setData) {
					// 微信小程序原生页面属性
					currentPage.disableSwipeBack = true;
				}
			}
		}
		// #endif
	},
	methods: {
		// 绘制星空背景
		drawStars() {
			const ctx = uni.createCanvasContext('starCanvas', this);
			const width = 750; // rpx
			const height = 1500;
			
			// 绘制星星
			for (let i = 0; i < 100; i++) {
				const x = Math.random() * width;
				const y = Math.random() * height;
				const radius = Math.random() * 2 + 1;
				const opacity = Math.random() * 0.5 + 0.3;
				
				ctx.beginPath();
				ctx.arc(x, y, radius, 0, 2 * Math.PI);
				ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
				ctx.fill();
			}
			
			ctx.draw();
		},
		
		// 初始化卡牌 - 显示全部78张
		initCards() {
			const shuffled = [...this.tarotCards].sort(() => Math.random() - 0.5);
			this.displayCards = shuffled.map(card => ({
				...card,
				flipped: false,
				selected: false,
				rotateY: 0,
				rotateX: 0,
				translateZ: 0,
				is_up: 1 // 默认正位
			}));
		},
		
		// 开始洗牌
		startShuffle() {
			this.shuffling = true;
			
			// 3D旋转洗牌动画
			const shuffleInterval = setInterval(() => {
				this.displayCards = this.displayCards.map(card => ({
					...card,
					rotateY: Math.random() * 720 - 360,
					rotateX: Math.random() * 360 - 180,
					translateZ: Math.random() * 100 - 50
				}));
			}, 150);
			
			// 2.5秒后停止洗牌
			setTimeout(() => {
				clearInterval(shuffleInterval);
				this.shuffling = false;
				
				// 重置卡牌状态
				this.displayCards = this.displayCards.map(card => ({
					...card,
					rotateY: 0,
					rotateX: 0,
					translateZ: 0
				}));
				
				// 展开卡牌
				setTimeout(() => {
					this.expanded = true;
				}, 300);
			}, 2500);
		},
		
		// 选择卡牌 - 显示预览后移动到槽位
		selectCard(index) {
			if (!this.expanded) return;
			if (this.selectedCards.length >= 3) return;
			if (this.displayCards[index].selected) return;
			
			// 随机生成正逆位状态：1=正位，2=逆位
			const isUp = Math.random() < 0.5 ? 1 : 2;
			
			// 记录临时选中状态
			this.tempSelectedIndex = index;
			this.tempIsUp = isUp;
			this.previewCard = this.displayCards[index]; // 用于显示基本信息(如果有)
			
			// 显示预览遮罩层
			this.showPreview = true;
		},
		
		// 确认选择
		confirmSelection() {
			if (this.tempSelectedIndex === -1) return;
			
			const index = this.tempSelectedIndex;
			const isUp = this.tempIsUp;
			const card = this.displayCards[index];
			
			// 1. 更新卡牌状态
			this.$set(card, 'is_up', isUp);
			this.$set(card, 'flipped', true);
			this.$set(card, 'selected', true);
			
			// 2. 请求接口
			this.fetchCardDetail(card, isUp);
			
			// 3. 添加到选中列表
			this.selectedCards.push(card);
			this.selectedCardIndices.push(index);
			
			// 4. 关闭预览并重置临时状态
			this.showPreview = false;
			this.previewCard = null;
			this.tempSelectedIndex = -1;
		},
		
		// 重新选择/取消选择
		reselect() {
			this.showPreview = false;
			this.previewCard = null;
			this.tempSelectedIndex = -1;
		},
		
		// 预览槽位卡牌
		previewSlotCard(index) {
			if (this.selectedCards[index]) {
				this.previewCard = this.selectedCards[index];
				this.showPreview = true;
			}
		},
		
		// 获取卡牌详情
		async fetchCardDetail(card, isUp) {
			try {
				const url = buildApiUrl(TAROT_API.getInfo);
				console.log('正在获取卡牌详情:', card.id, '正逆位:', isUp === 1 ? '正位' : '逆位', url);
				
				const response = await uni.request({
					url: url,
					method: 'GET',
					data: {
						id: card.id,
						is_up: isUp
					},
					timeout: 10000
				});
				
				if (response.statusCode === 200 && response.data.code === 1) {
					const data = response.data.data;
					// 将获取到的详情记录在卡牌对象上
					this.$set(card, 'detail', {
						name_cn: data.name_cn,
						meaning_cn: data.meaning_cn
					});
					console.log('成功获取卡牌详情:', card.detail);
				} else {
					console.error('获取卡牌详情失败:', response);
					throw new Error(response.data.msg || '接口请求失败');
				}
			} catch (error) {
				console.error('获取卡牌详情请求异常:', error);
				// 使用默认数据作为降级方案，模仿tarot-a
				this.$set(card, 'detail', {
					name_cn: '命运指引',
					meaning_cn: '走出低谷、恢复力量'
				});
			}
		},

		// 重置
		reset() {
			this.shuffling = false;
			this.expanded = false;
			this.showResult = false;
			this.showPreview = false;
			this.previewCard = null;
			this.selectedCards = [];
			this.selectedCardIndices = [];
			this.fanOffset = 0;
			this.isAnimating = false;
			this.initCards();
		},
		
		// 计算扇形布局的transform
		getFanTransform(index) {
			const totalCards = this.displayCards.length; // 78张牌
			const centerIndex = totalCards / 2;
			
			// 应用滑动偏移(移除循环逻辑)
			let adjustedIndex = index + this.fanOffset;
			
			// 计算相对于中心的偏移(不再使用循环)
			let relativePos = adjustedIndex - centerIndex;
			
			// 归一化位置 [-1, 1]
			const normalizedPos = relativePos / centerIndex;
			
			// 扇形角度范围:-70度到70度
			const maxAngle = 70;
			const angle = normalizedPos * maxAngle;
			
			// 计算Y轴偏移,形成弧形(中间高,两侧低)
			const maxYOffset = 100;
			const yOffset = Math.abs(normalizedPos) * maxYOffset;
			
			// 计算X轴位置,让卡牌重叠排列
			const cardWidth = 200; // rpx
			const overlapFactor = 0.12; // 重叠系数
			const xOffset = relativePos * (cardWidth * overlapFactor);
			
			// 计算Z轴深度,中间的卡牌向前
			const maxZOffset = 50;
			const zOffset = (1 - Math.abs(normalizedPos)) * maxZOffset;
			
			return `translateX(${xOffset}rpx) translateY(${yOffset}rpx) translateZ(${zOffset}rpx) rotate(${angle}deg)`;
		},
		
		// 计算卡牌的zIndex
		getCardZIndex(index) {
			const totalCards = this.displayCards.length;
			const centerIndex = totalCards / 2;
			
			// 应用偏移并计算相对位置(移除循环逻辑)
			let adjustedIndex = index + this.fanOffset;
			let relativePos = adjustedIndex - centerIndex;
			
			// 中间的卡牌zIndex最高
			return 100 - Math.floor(Math.abs(relativePos));
		},
		
		// 页面级触摸开始处理(用于阻止左滑返回)
		handlePageTouchStart(e) {
			// #ifdef MP-WEIXIN
			const touchX = e.touches[0].clientX;
			// 检测是否是左边缘滑动
			if (touchX < 50) {
				// 阻止左边缘滑动触发返回
				e.stopPropagation();
				return false;
			}
			// #endif
		},
		
		// 触摸开始
		handleTouchStart(e) {
			// 如果正在执行回弹动画,立即停止动画,让用户接管控制
			if (this.isAnimating) {
				this.isAnimating = false;
			}
			
			// 标记开始拖动,禁用transition避免残影
			this.isDragging = true;
			
			const touchX = e.touches[0].clientX;
			this.touchStartX = touchX;
			this.touchStartOffset = this.fanOffset;
		},
		
		// 触摸移动
		handleTouchMove(e) {
			// 如果正在执行回弹动画,忽略触摸移动
			if (this.isAnimating) return;
			
			const touchX = e.touches[0].clientX;
			const deltaX = touchX - this.touchStartX;
			// 降低滑动灵敏度,使拖动更平滑
			const sensitivity = 0.02;
			// 修复滑动方向:向右滑动显示后面的卡牌
			let newOffset = this.touchStartOffset + (deltaX * sensitivity);
			
			// 添加边界限制
			const totalCards = this.displayCards.length;
			const centerIndex = totalCards / 2;
			// 修正边界值:让第一张和最后一张卡牌都能显示在中心位置
			const minOffset = -(totalCards - 1 - centerIndex); // -38,最后一张卡牌在中心
			const maxOffset = centerIndex; // 39,第一张卡牌在中心
			
			// 橡皮筋效果:超出边界时增加阻力
			const dampingFactor = 0.3;
			if (newOffset < minOffset) {
				const overscroll = minOffset - newOffset;
				newOffset = minOffset - (overscroll * dampingFactor);
			} else if (newOffset > maxOffset) {
				const overscroll = newOffset - maxOffset;
				newOffset = maxOffset + (overscroll * dampingFactor);
			}
			
			this.fanOffset = newOffset;
		},
		
		// 触摸结束
		handleTouchEnd(e) {
			// 标记拖动结束,恢复transition
			this.isDragging = false;
			
			// 检测是否超出边界,如果超出则回弹
			const totalCards = this.displayCards.length;
			const centerIndex = totalCards / 2;
			const minOffset = -(totalCards - 1 - centerIndex); // -38
			const maxOffset = centerIndex; // 39
			
			if (this.fanOffset < minOffset) {
				// 回弹到最小边界
				this.animateToOffset(minOffset);
			} else if (this.fanOffset > maxOffset) {
				// 回弹到最大边界
				this.animateToOffset(maxOffset);
			}
		},
		
		// 回弹动画
		animateToOffset(targetOffset) {
			this.isAnimating = true;
			const startOffset = this.fanOffset;
			const distance = targetOffset - startOffset;
			const duration = 300; // 动画持续时间(毫秒)
			const startTime = Date.now();
			
			const animate = () => {
				const currentTime = Date.now();
				const elapsed = currentTime - startTime;
				const progress = Math.min(elapsed / duration, 1);
				
				// 使用easeOutCubic缓动函数,实现平滑回弹
				const easeProgress = 1 - Math.pow(1 - progress, 3);
				this.fanOffset = startOffset + (distance * easeProgress);
				
				if (progress < 1) {
					requestAnimationFrame(animate);
				} else {
					this.fanOffset = targetOffset;
					this.isAnimating = false;
				}
			};
			
			requestAnimationFrame(animate);
		},
		
		// 预览槽位卡牌
		previewSlotCard(index) {
			if (this.selectedCards[index]) {
				this.previewCard = this.selectedCards[index];
				this.showPreview = true;
			}
		},
		
		// 关闭结果
		closeResult() {
			this.showResult = false;
		},
		
		// 跳转到AI对话页面
		goToChat() {
			// 序列化卡牌数据
			const cardsData = encodeURIComponent(JSON.stringify(this.selectedCards));
			uni.navigateTo({
				url: `/pages/tarot-chat/tarot-chat?cards=${cardsData}`
			});
		}
	}
}
</script>

<style scoped>
.tarot-container {
	min-height: 100vh;
	background: linear-gradient(180deg, #0F2027 0%, #203A43 50%, #2C5364 100%);
	position: relative;
	overflow: hidden;
	padding: 40rpx 30rpx;
}

/* 预览文字样式 */
.preview-title-area {
	text-align: center;
	margin-bottom: 40rpx;
	animation: slide-down 0.5s ease-out;
}

.preview-title {
	display: block;
	font-size: 48rpx;
	font-weight: bold;
	color: #FFD700;
	text-shadow: 0 0 20rpx rgba(255, 215, 0, 0.5);
	margin-bottom: 16rpx;
}

.preview-subtitle {
	display: block;
	font-size: 28rpx;
	color: #A8C5E2;
	letter-spacing: 2rpx;
}

@keyframes slide-down {
	from {
		opacity: 0;
		transform: translateY(-50rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 星空画布 */
.star-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* 标题区域 */
.header {
	text-align: center;
	margin-bottom: 60rpx;
	position: relative;
	z-index: 10;
}

.title {
	display: block;
	font-size: 56rpx;
	font-weight: bold;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 16rpx;
	text-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.3);
}

.subtitle {
	display: block;
	font-size: 28rpx;
	color: #A8C5E2;
	letter-spacing: 2rpx;
}

/* 卡牌区域 */
.cards-area {
	min-height: 400rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-bottom: 20rpx;
	perspective: 1000px;
}

/* 洗牌区域 */
.card-shuffle-area {
	position: relative;
	width: 250rpx;
	height: 360rpx;
	transform-style: preserve-3d;
	perspective: 1500px;
}

.shuffle-card {
	position: absolute;
	left: 0;
	top: 0;
	transition: transform 0.3s ease-out;
	box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.3);
	border-radius: 12rpx;
	overflow: hidden;
}

.shuffling {
	animation: shuffle-3d 0.5s ease-in-out infinite;
	box-shadow: 0 8rpx 30rpx rgba(102, 126, 234, 0.5);
}

@keyframes shuffle-3d {
	0%, 100% { 
		filter: brightness(1);
		box-shadow: 0 8rpx 30rpx rgba(102, 126, 234, 0.5);
	}
	50% { 
		filter: brightness(1.3);
		box-shadow: 0 12rpx 40rpx rgba(102, 126, 234, 0.7);
	}
}

/* 扇形堆叠布局 */
.card-fan-container {
	width: 100%;
	height: 500rpx;
	position: relative;
	overflow: hidden;
	perspective: 2000px;
	touch-action: pan-x;
}

.card-fan {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-style: preserve-3d;
}

.card-fan .card {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -100rpx;
	margin-top: -160rpx;
	animation: fan-appear 0.8s ease-out backwards;
	transform-origin: center bottom;
	transition: transform 0.3s ease-out, opacity 0.3s ease;
	cursor: pointer;
}

/* 拖动时禁用transition,避免残影 */
.card-fan-container.dragging .card {
	transition: none !important;
}

.card-fan .card.card-hidden {
	opacity: 0.3;
	transform: scale(0.8) !important;
	pointer-events: none;
}

@keyframes fan-appear {
	from {
		opacity: 0;
		transform: translateY(200rpx) scale(0.5);
	}
	to {
		opacity: 1;
	}
}

/* 卡牌放置槽位 */
.card-slots {
	display: flex;
	justify-content: center;
	gap: 30rpx;
	padding: 30rpx 20rpx;
	margin-top: 0;
	margin-bottom: 20rpx;
	position: relative;
	z-index: 10;
}

.card-slot {
	position: relative;
	width: 200rpx;
	min-height: 320rpx;
	border: 3rpx dashed rgba(102, 126, 234, 0.5);
	border-radius: 16rpx;
	background: rgba(102, 126, 234, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.card-slot.has-card {
	border-color: #667eea;
	background: rgba(102, 126, 234, 0.2);
	box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.3);
}

.slot-label {
	position: absolute;
	top: 10rpx;
	left: 50%;
	transform: translateX(-50%);
	font-size: 24rpx;
	color: #667eea;
	font-weight: bold;
	background: rgba(15, 32, 39, 0.8);
	padding: 6rpx 16rpx;
	border-radius: 12rpx;
	z-index: 10;
}

.slot-card {
	width: 100%;
	height: 100%;
	animation: slot-card-appear 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes slot-card-appear {
	from {
		opacity: 0;
		transform: scale(0.5) translateY(-100rpx);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.slot-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.placeholder-text {
	font-size: 80rpx;
	color: rgba(102, 126, 234, 0.3);
	font-weight: bold;
}

/* 卡牌翻转容器 */
.card-flip-container {
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.card-flip-container.flipped {
	transform: rotateY(180deg);
}

.card-flip-container.selected {
	animation: card-glow 1.5s ease-in-out infinite;
}

@keyframes card-glow {
	0%, 100% {
		filter: drop-shadow(0 0 10rpx rgba(102, 126, 234, 0.5));
	}
	50% {
		filter: drop-shadow(0 0 25rpx rgba(102, 126, 234, 0.8));
	}
}

/* 卡牌基础样式 */
.card {
	width: 200rpx;
	height: 320rpx;
	border-radius: 16rpx;
	cursor: pointer;
}

.card-face {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	border-radius: 16rpx;
	overflow: hidden;
}

.card-back {
	background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
	border: 3rpx solid #4A90E2;
	box-shadow: 0 8rpx 30rpx rgba(74, 144, 226, 0.3);
}

.card-front {
	background: #FFFFFF;
	border: 3rpx solid #DAA520;
	transform: rotateY(180deg);
	box-shadow: 0 8rpx 30rpx rgba(218, 165, 32, 0.4);
}

/* 卡牌图片样式 */
.card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 16rpx;
}

.card-inner {
	width: 100%;
	height: 100%;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}

/* 卡牌背面设计 */
.card-back-design {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}

.mystical-symbol {
	font-size: 80rpx;
	color: #4A90E2;
	text-shadow: 0 0 20rpx rgba(74, 144, 226, 0.8);
	animation: rotate-symbol 4s linear infinite;
}

@keyframes rotate-symbol {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.card-border {
	position: absolute;
	top: 10rpx;
	left: 10rpx;
	right: 10rpx;
	bottom: 10rpx;
	border: 2rpx solid #4A90E2;
	border-radius: 8rpx;
	opacity: 0.5;
}

.tarot-text {
	position: absolute;
	bottom: 30rpx;
	font-size: 24rpx;
	color: #4A90E2;
	letter-spacing: 6rpx;
	font-weight: bold;
}



.card-glow {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 12rpx;
	background: radial-gradient(circle, rgba(102, 126, 234, 0.2) 0%, transparent 70%);
	animation: glow-pulse 1.5s ease-in-out infinite;
}

@keyframes glow-pulse {
	0%, 100% { opacity: 0.5; }
	50% { opacity: 1; }
}

/* 操作区域 */
.action-area {
	text-align: center;
	position: relative;
	z-index: 10;
	margin-bottom: 40rpx;
}

.action-btn {
	width: 420rpx;
	height: 96rpx;
	border-radius: 48rpx;
	margin: 0 auto;
	border: none;
	padding: 0;
	overflow: visible;
	background: transparent;
}

.action-btn::after {
	border: none;
}

.btn-content {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 48rpx;
	transition: all 0.3s;
}

.shuffle-btn .btn-content {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.5);
}

.reset-btn .btn-content {
	background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
	box-shadow: 0 8rpx 25rpx rgba(74, 144, 226, 0.5);
}

.btn-hover .btn-content {
	transform: translateY(-4rpx);
	box-shadow: 0 12rpx 30rpx rgba(102, 126, 234, 0.6);
}

.btn-icon {
	font-size: 44rpx;
	margin-right: 16rpx;
}

.btn-text {
	font-size: 32rpx;
	font-weight: bold;
	color: #FFFFFF;
}

/* 洗牌指示器 */
.shuffling-indicator {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20rpx;
}

.loading-spinner {
	width: 60rpx;
	height: 60rpx;
	border: 4rpx solid rgba(102, 126, 234, 0.3);
	border-top-color: #667eea;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

.shuffling-text {
	font-size: 32rpx;
	color: #667eea;
	font-weight: bold;
}

/* 进度区域 */
.progress-area {
	text-align: center;
	position: relative;
	z-index: 10;
}

.progress-text {
	display: block;
	font-size: 28rpx;
	color: #A8C5E2;
	margin-bottom: 20rpx;
}

.progress-dots {
	display: flex;
	justify-content: center;
	gap: 16rpx;
}

.dot {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background: rgba(168, 197, 226, 0.3);
	transition: all 0.3s;
}

.dot.active {
	background: #667eea;
	box-shadow: 0 0 12rpx rgba(102, 126, 234, 0.6);
}

.start-btn {
	margin-bottom: 24rpx;
}

.start-btn .btn-content {
	background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
	box-shadow: 0 8rpx 25rpx rgba(255, 215, 0, 0.5);
}

.preview-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	animation: overlay-fade-in 0.3s;
}

.preview-card-container {
	animation: preview-card-appear 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes preview-card-appear {
	0% {
		opacity: 0;
		transform: scale(0.5) translateY(-100rpx);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.preview-card {
	width: 280rpx;
	height: 448rpx;
	box-shadow: 0 20rpx 60rpx rgba(218, 165, 32, 0.6);
	animation: preview-glow 1.5s ease-in-out infinite;
}

@keyframes preview-glow {
	0%, 100% {
		filter: drop-shadow(0 0 30rpx rgba(102, 126, 234, 0.8));
	}
	50% {
		filter: drop-shadow(0 0 50rpx rgba(102, 126, 234, 1)) brightness(1.1);
	}
}

/* 结果弹窗 */
.result-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	animation: overlay-fade-in 0.3s;
}

@keyframes overlay-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.result-modal {
	width: 90%;
	max-width: 650rpx;
	max-height: 80vh;
	background: linear-gradient(135deg, #FFF8DC 0%, #F5F5DC 100%);
	border-radius: 32rpx;
	padding: 50rpx 40rpx;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.5);
	animation: modal-slide-up 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	overflow-y: auto;
}

@keyframes modal-slide-up {
	from {
		transform: translateY(200rpx) scale(0.8);
		opacity: 0;
	}
	to {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

.modal-header {
	text-align: center;
	margin-bottom: 40rpx;
}

.modal-title {
	display: block;
	font-size: 44rpx;
	font-weight: bold;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 12rpx;
}

.modal-subtitle {
	display: block;
	font-size: 26rpx;
	color: #8B7355;
}

.result-cards {
	margin-bottom: 40rpx;
}

.result-item {
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 20rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.08);
	animation: item-fade-in 0.5s ease-out backwards;
}

@keyframes item-fade-in {
	from {
		opacity: 0;
		transform: translateX(-50rpx);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.result-header {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20rpx;
}

.position-badge {
	display: inline-block;
	padding: 8rpx 20rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #FFFFFF;
	font-size: 24rpx;
	border-radius: 20rpx;
	font-weight: bold;
}

.result-card-image {
	width: 100%;
	height: 400rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 12rpx;
}

.result-card-image image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.result-card-info {
	text-align: center;
	margin-bottom: 16rpx;
}

.result-card-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #4A148C;
}

.result-card-meaning {
	margin-top: 20rpx;
	padding: 16rpx;
	background: rgba(102, 126, 234, 0.1);
	border-radius: 12rpx;
}

.result-card-meaning text {
	font-size: 28rpx;
	color: #4A148C;
	line-height: 1.5;
	display: block;
}

.close-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #FFFFFF;
	border-radius: 44rpx;
	border: none;
	font-size: 32rpx;
	font-weight: bold;
	box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.4);
}

.close-btn::after {
	border: none;
}
</style>
